<template>
	<checkbox-group @change="handleChange">
		<view
			class="item-card-content"
			v-for="(item, index) in goodsList"
			:key="item.id"
			@click="currentItemInfo(item)"
			v-show="goodsList.length > 0"
		>
			<view class="cart-card" ref="card" :style="{ right: item.right + 'rpx' }">
				<view
					class="left"
					@touchstart="
						(e) => {
							touchStart(e, index);
						}
					"
					@touchmove="
						(e) => {
							touchMove(e, item.right);
						}
					"
					@touchend="touchEnd"
				>
					<checkbox
						:checked="item.checked"
						:value="item"
						:disabled="item.status == 30"
						activeBorderColor="#111111"
						activeBackgroundColor="#1111111A"
						iconColor="#111"
						backgroundColor="#fff"
						borderColor="#B7B9BAFF"
						style="margin-left: 24rpx"
					/>
					<view class="img-box">
						<image
							class="img"
							:src="item.imageThumbnailUrl"
							style="width: 208rpx; height: 208rpx; border-radius: 16rpx"
							@click="getCurrentItem(item)"
						>
						</image>
						<view v-if="item.status == 30" class="sold-out">
							<view>商品已下架</view>
						</view>
					</view>
					<view class="desc">
						<view class="code">{{ item.imageName }}</view>
						<uni-data-select
							v-model="item.printType"
							:localdata="item.printTypes"
							:clear="false"
							:disabled="item.status == 30"
							@change="handleSeclectChange"
						/>
					</view>
					<uni-number-box
						class="number-box"
						:value="item.count"
						:disabled="item.status == 30"
						:min="min"
						:step="1"
						@change="
							(val) => {
								changeNumber(val, item);
							}
						"
					/>
				</view>
				<view class="right" @click="handleDel(item)"> 删除 </view>
			</view>
		</view>
	</checkbox-group>

	<f-empty
		v-show="!goodsList.length"
		:icon="emptyConfig.icon"
		:text="emptyConfig.text"
		:showAction="emptyConfig.showAction"
		:actionText="emptyConfig.actionText"
	/>
</template>

<script setup>
	import dataEmpty from '@/static/empty/data-empty.png';
	import { ref, reactive, computed, watch, watchEffect, toRaw } from 'vue';
	import sheep from '@/sheep';
	import cartApi from '../../../sheep/api/cart.js';

	const emit = defineEmits([
		'checkedAllCards',
		'delSucceed',
		'currentItemInfo',
		'changeNumber',
		'handleSeclectChange',
	]);

	const goodsList = computed(() => sheep.$store('cart').list);
	const min = 1;
	const emptyConfig = reactive({
		icon: dataEmpty,
		text: '空空如也',
		showAction: true,
		actionText: '去登陆/注册 >>',
	});
	const startX = ref(0);
	const delBtnShow = ref(false);
	const moveDis = ref(0);
	const card = ref();
	const moveX = ref(0);
	const currentIndex = ref(0); // 当前滑动的对象序列
	const deleteDis = 150; //滑动到显示删除按钮的距离
	const selectCount = ref(0);
	const selectText = ref('');
	const currentItemId = ref(0);
	const currentItemList = ref([]);

	const getCurrentItem = (item) => {
		sheep.$router.go('/pages/index/goodsDetail', { id: item.imageId });
	};

	/**
	 * 删除商品事件
	 */
	const handleDel = (item) => {
		cartApi.deleteCart(item.id).then((res) => {
			emit('delSucceed', res.data.cartItems);
		});
	};
	/**
	 * 商品勾选/非勾选变化事件
	 */
	const handleChange = (e) => {
		sheep.$store('cart').selectedItemsChange(e.detail.value);
	};
	//当前点击的商品项
	const currentItemInfo = (item) => {
		emit('currentItemInfo', item);
	};
	//下拉列表的change事件
	const handleSeclectChange = (val) => {
		emit('handleSeclectChange', val);
	};
	//点击数量的change事件
	const changeNumber = (val, item) => {
		emit('changeNumber', val, item);
	};

	/**
	 * 滑动事件-开始
	 */
	const touchStart = (e, index) => {
		// 变更滑动对象，原对象位置重置
		if (currentIndex.value !== '' && currentIndex.value !== index) {
			goodsList.value[currentIndex.value].right = 0;
			delBtnShow.value = false;
		}
		currentIndex.value = index;

		startX.value = e.touches[0].clientX;
	};
	/**
	 * 滑动事件-滑动
	 */
	const touchMove = (e, right) => {
		moveX.value = e.touches[0].clientX;
		moveDis.value = moveX.value - startX.value;
		// 向右滑动情况下，保持不动
		if (right == 0 && moveDis.value > 0) {
			return;
		}
		if (Math.abs(moveDis.value) > deleteDis) {
			goodsList.value[currentIndex.value].right = -deleteDis;
		}
		goodsList.value[currentIndex.value].right = -moveDis.value;
	};
	/**
	 * 滑动事件-结束
	 */
	const touchEnd = (e) => {
		if (delBtnShow.value) {
			// 右滑动
			if (moveDis.value > 75) {
				goodsList.value[currentIndex.value].right = 0;
				delBtnShow.value = false;
			} else {
				goodsList.value[currentIndex.value].right = -deleteDis;
			}
			// 左滑
			if (moveDis.value < 0) {
				goodsList.value[currentIndex.value].right = deleteDis;
			}
		} else {
			// 左滑动
			if (moveDis.value < -75) {
				goodsList.value[currentIndex.value].right = deleteDis;
				delBtnShow.value = true;
			} else {
				goodsList.value[currentIndex.value].right = 0;
			}
			// 右滑
			if (moveDis.value > 0) {
				goodsList.value[currentIndex.value].right = 0;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item-card-content {
		.cart-card {
			display: flex;
			width: 686rpx;
			height: 240rpx;
			background: #ffffff;
			box-shadow: 0px 60rpx 20rpx -50rpx rgba(18, 24, 26, 0.1);
			border-radius: 16rpx;
			margin: 32rpx;
			box-sizing: border-box;
			position: relative;

			.left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.img-box {
					width: 208rpx;
					height: 208rpx;
					position: relative;
					.img {
						flex-basis: 208rpx;
						flex-shrink: 0;
					}
					.sold-out {
						background-color: rgba(0, 0, 0, 0.4);
						position: absolute;
						z-index: 2;
						width: 100%;
						height: 100%;
						top: 0;
						display: flex;
						align-items: center;
						color: #fff;
						justify-content: center;
						font-weight: 500;
						font-size: 0.875rem;
						color: rgb(255, 255, 255);
						border-radius: 5px;
					}
				}

				.desc {
					margin-left: 28rpx;
					flex-grow: 1;

					.name {
						font-weight: 500;
						font-size: 32rpx;
						color: #111111;
					}

					.code {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						margin-bottom: 32rpx;
					}
				}

				.number-box {
					width: 48rpx;
					height: 154rpx;
					border-radius: 16rpx;
					border: 2rpx solid #eef0f2;
					flex-direction: column-reverse;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;
					margin-right: 22rpx;
					margin-left: 50rpx;

					:deep(.uni-numbox__value) {
						width: 48rpx;
						height: 56rpx;
						border: 1px solid #eef0f2;
					}

					:deep(.uni-numbox-btns) {
						width: 48rpx;
						height: 49rpx;
					}
				}
			}

			.right {
				width: 120rpx;
				height: 240rpx;
				background: #f25b4d;
				box-shadow: 0px 20rpx 20rpx -20rpx rgba(18, 24, 26, 0.2);
				border-radius: 32rpx;
				line-height: 240rpx;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				position: absolute;
				right: -155rpx;
			}
		}
	}

	:deep(.uni-checkbox-input) {
		& > svg {
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			background: #111;
			color: #111;
		}

		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}
</style>
